<template>
  <van-popup v-model:show="showBottom"
    :style="{'width':'90%', 'box-sizing':'border-box','padding':'20px','text-align': 'center' }">
    <div style="text-align: center;font-size: 14px;font-weight: bold;">实名认证</div>
    <qrcode-vue style="margin: 10px 0;" :value="qrUrl" :size="200" level="L" />
    <div style="text-align: center;font-size: 12px;color: #707070;">请使用支付宝[扫一扫]完成认证</div>
    <!-- <div class="fuzi-box">或者<div @click="handleCopy(qrUrl)">复制链接</div>在手机浏览器打开</div> -->
  </van-popup>
</template>
  
  <script>
import { reactive, toRefs } from 'vue'
import QrcodeVue from 'qrcode.vue'
import { successDeal } from '@/utils/utils'
export default {
  components: {
    QrcodeVue,
  },
  setup() {
    const state = reactive({
      showBottom: false,

      qrUrl: null,
    })

    function dialogShow(qrUrl) {
      state.qrUrl = qrUrl
      state.showBottom = true
    }

    function handleCopy(value) {
      const input = document.createElement('input');
      document.body.appendChild(input)

      input.setAttribute('value', value);
      input.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        successDeal('已复制到剪贴板')
      }
      document.body.removeChild(input);
    }

    return {
      ...toRefs(state),
      dialogShow,
      handleCopy,
    }
  }
}
  </script>
  
  <style lang="scss" scoped>
.fuzi-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 5px;
  font-size: 10px;
  > div {
    background: #488bfe;
    color: #ffffff;
    box-sizing: border-box;
    padding: 3px 10px;
    border-radius: 20px;
    margin: 0 5px;
  }
}
</style>